* {
    margin: 0;
    padding: 0;
    font-family: '微软雅黑', '宋体', '黑体', serif;
    font-size: 14px;
    color: #333;
}

a {
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

img {
    border: none;
}

input, textarea {
    outline: none;
}


.pubCon {
    margin: 0 auto;
}

.pubTit {
    text-align: center;
    padding-bottom: 50px;
}

.pubTit h2 {
    font-size: 24px;
    font-weight: 400;
    padding-bottom: 10px;
}

.pubTit .line {
    width: 100px;
    height: 2px;
    background: #00abd9;
    display: inline-block;
}


.bodyBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    display: none;
}

/*头部模块*/
.header {
    height: 60px;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #00abd9;
}

.hdCon {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hdNav ul {
    display: flex;
    height: 100%;
}

.hdNav li a {
    display: block;
    font-size: 18px;
    padding: 0 20px;
    height: 100%;
    line-height: 60px;
    transition: 0.3s;
    position: relative;
}

.hdNav li:hover a, .hdNav li.active a {
    color: #00abd9;
}

.hdMenu {
    display: none;
    border: 1px solid #aaa;
    width: 40px;
    border-radius: 4px;
    cursor: pointer;
}

.hdMenu i {
    display: block;
    width: 30px;
    height: 2px;
    margin: 6px auto;
    background: #aaa;
    transition: 0.3s;
}

/*点*/
.hdNav li a::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #00abd9;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 3px);
    bottom: 6px;
    opacity: 0;
    transition: 0.3s;
}

.hdNav li:hover > a::after, .hdNav li.active a::after {
    opacity: 1;
}


/*banner*/
.banner {
    width: 100%;
    height: 500px;
    background: no-repeat center;
}

.banner a {
    display: block;
    height: 500px;
    cursor: move;
}

.banner a.small {
    display: none;
}

.banner .swiper-pagination-bullet {
    background: #fff;
}

/*服务模块*/
.service {
    padding: 60px 0
}

.service .serCon {
    display: flex;
    text-align: center;
}

.serCon .box {
    display: block;
    box-sizing: border-box;
    height: 380px;
    padding: 0 30px;
}

.serCon .box .boxIcon {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border: 1px solid #00abd9;
    border-radius: 50%;
    transition: 0.3s;
    line-height: 200px;
}

.serCon .iconfont {
    font-size: 90px;
    color: #00abd9;
    transition: 0.3s;
}

.serCon h3 {
    font-size: 22px;
    font-weight: 400;
    padding: 50px 0 25px;
    transition: 0.3s;
}

.serCon .box p {
    line-height: 1.5em;
    color: #666;
}

.serCon .box:hover > .boxIcon {
    background: #00abd9;
}

.serCon .box:hover > h3 {
    color: #00abd9;
}

.serCon .box:hover > .boxIcon .iconfont {
    color: #fff;
}

/*关于*/
.about {
    padding: 90px 0;
    background: url("../images/aboutBg.jpg") no-repeat center fixed;
}

.abtTit h2 {
    color: #fff;
}

.abtTit .line {
    color: #ffffff;
}

.abtText {
    color: #fff;
    font-size: 18px;
    line-height: 2em;
    padding: 0 50px;
    opacity: 0.8;
    text-align: center;
}

.btnGroup {
    width: 100%;
    text-align: center;
    padding-top: 100px;
    font-size: 0;
}

.btnGroup .btn {
    display: inline-block;
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 10px;
    color: #fff;
    font-size: 20px;
    margin: 0 10px;
    transition: 300ms;
    background: -webkit-gradient(linear, left top, right top, from(#f67b1f), to(#ef2d58));
    background: -o-linear-gradient(left, #f67b1f, #ef2d58);
    background: linear-gradient(to right, #f67b1f, #ef2d58);
}

.btnGroup .btnRight {
    background: -webkit-gradient(linear, left top, right top, from(#0fcfd7), to(#5960ff));
    background: -o-linear-gradient(left, #0fcfd7, #5960ff);
    background: linear-gradient(to right, #0fcfd7, #5960ff);
}

.btnGroup .btn:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}


/*案例*/
.case {
    padding: 90px 0;
}

.caseCon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.caseCon .box {
    width: 32%;
    margin-bottom: 20px;
    display: block;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    perspective: 600px;
}

.caseCon .box .ceng {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    padding: 0 30px;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: rotateX(110deg);
    transform-origin: bottom;
    transition: 300ms;
}

.caseCon .ceng h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
}

.caseCon .ceng .pic {
    display: block;
}

.caseCon .ceng .line {
    width: 100px;
    height: 2px;
    margin: 20px auto;
    background: #ffffff;
}

.caseCon .ceng p {
    color: #fff;
    font-size: 16px;
    line-height: 1.5em;
    text-align: center;
    opacity: 0.8;
}

.caseCon .box:hover .ceng {
    transform: rotateX(0deg);
}


/*服务的客户*/
.clientCon {
    overflow: hidden;

}

.clientCon .box {
    float: left;
    width: 200px;
    padding: 10px;
    box-sizing: border-box;
}

.clientCon .box img {
    width: 100%;
    display: block;
}

/*底部模块*/
.footer {
    padding-top: 90px;
    background: #f5f5f5;

}

.ftMain {
    padding: 20px 0;
    min-height: 100px;
}

.ftMain .ftLogo {
    display: flex;
    align-items: center;
}

.ftMain .ftLogo .text {
    padding-left: 15px;
    font-size: 16px;
    font-weight: 400;
}

.ftCon {
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
}

.ftCon h4 {
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 15px;
}

.ftLink {
    display: flex;
}

.ftLink .box {
    padding: 0 20px;
}

.ftLink a {
    display: block;
    line-height: 2em;
}

.ftLink a:hover {
    color: #00abd9
}

.ftContact h4 {
    color: #00abd9
}

.ftContact p {
    line-height: 2em;
}

.ftEwm {
    text-align: center;
}

.copyright {
    background: #000;
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 0;
    text-align: center;
}

.copyright span {
    color: rgba(255, 255, 255, 0.6)
}

.copyright a {
    color: #fff;
}


@media screen and (max-width: 992px) {
    .pubCon {
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;
    }

    .pubTit {
        padding-bottom: 40px;
    }

    .pubTit h2 {
        font-size: 28px;
    }

    .pubTit .line {
        width: 40px;
    }

    /*头部模块*/
    .hdNav {
        display: none;
        position: absolute;
        top: 61px;
        left: 0;
        width: 100%;
    }

    .hdNav ul {
        flex-direction: column;
        text-align: center;
        height: auto;
    }

    .hdNav li {
        line-height: 50px;
        background: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid #e8e8e8;
    }

    .hdMenu {
        display: block;

    }

    .hdMenu i {
        transform-origin: left;
    }

    .hdMenu.active i:nth-child(1) {
        transform: rotate(30deg);
        width: 33px;
    }

    .hdMenu.active i:nth-child(2) {
        opacity: 0;
    }

    .hdMenu.active i:nth-child(3) {
        transform: rotate(-30deg);
        width: 33px;
    }


    /*banner*/
    .banner {
        height: 681px;
    }

    .banner a {
        background-size: cover;
        background-position: center center; /* 水平垂直居中 */
        height: 681px;
    }

    .banner a.small {
        display: block;
    }

    .banner a.big {
        display: none;
    }


    /*服务模块*/
    .service .serCon {
        flex-wrap: wrap;
    }

    .serCon .box {
        width: 50%;
        height: auto;
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .serCon .box .boxIcon {
        width: 120px;
        height: 120px;
        line-height: 120px;
    }

    .serCon .iconfont {
        font-size: 60px;
    }

    .serCon h3 {
        font-size: 22px;
        font-weight: 400;
        padding: 50px 0 25px;
        transition: 0.3s;
    }


    /*关于*/
    .about {
        padding: 50px 0;
        background-attachment: scroll;
    }

    .abtTit {
        padding: 0 20px;
        box-sizing: border-box;
    }

    .abtTit br {
        display: none;
    }

    .btnGroup .btn {
        display: inline-block;
        width: 80%;
        margin-bottom: 20px;
    }


    /*案例*/
    .case {
        padding: 50px 0;
    }

    .caseCon {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .caseCon .box {
        width: 49%;
    }

    .caseCon .box:last-child {
        display: none;
    }

    .caseCon .box .ceng {
        display: none;
    }

    /*服务的客户*/
    .clientCon .box {
        width: 25%;
    }


    /*底部模块*/
    .footer {
        padding-top: 50px;
    }

    .ftCon {
        flex-direction: column;
        position: relative;
    }

    .ftLink {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
    }

    .ftLink .box {
        padding: 0 20px 0 0;
    }

    .ftEwm {
        position: absolute;
        right: 0;
        top: 30px;
    }

}

/* 小屏幕显示器 */
@media screen and (min-width: 992px) {
    .pubCon {
        width: 960px;
    }

    .pubTit {
        padding-bottom: 50px;
    }

    .pubTit h2 {
        font-size: 30px;
    }

    /*服务模块*/
    .service {
        padding: 70px 0;
    }

    .serCon .box {
        padding: 0 10px;
        height: auto;
    }

    .serCon .boxIcon {
        width: 140px;
        height: 140px;
        line-height: 140px;
    }

    .serCon .boxIcon .iconfont {
        font-size: 80px;
    }

    .serCon h3 {
        padding: 40px 0 20px;
    }


    /* 关于我们模块 */
    .about {
        padding: 70px 0;
        background-attachment: scroll;
    }

    .abtText {
        padding: 0px;
    }

    /*客户列表*/
    .clientCon li {
        width: 25%;
    }
}

/* 大屏显示器 */
@media(min-width:1300px){
    .pubCon{ width:1200px; }
    .pubTit{padding-bottom:60px;}
    .pubTit h2{ font-size: 32px; }


    /*服务模块*/
    .service{ padding:90px 0 50px}
    .serCon .box{ height: 380px;  padding:0 30px; }
    .serCon .boxIcon{ width:200px; height: 200px;line-height: 200px;}
    .serCon .boxIcon  .iconfont{ font-size: 90px;}
    .serCon h3{ padding:50px 0 25px; }


    /* 关于我们模块 */
    .about{ padding:90px 0; background-attachment:fixed;}
    .abtText{ padding:0px 70px; }

    /*客户列表*/
    .clientCon li{ width:16.6%; }
}
